<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style14-04.css" />
		<title>Zozor - Carnets de voyage</title>
	</head>
	
	<body>
		<div id="bloc_page">
			<header>
				<div id="titre_principal">
					<img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" />
					<h1>Zozor</h1>
					<h2>Carnets de voyage</h2>
				</div>
				<nav>
					<ul>
						<li><a href="#">Accueil</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">CV</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
			</header>
			
			<div id="banniere_image">
				<div id="banniere_description">
					Retour sur mes vacances aux Etats-Unis...
					<a href="#" class="bouton_rouge">Voir l'article<img src="images/flecheblanchedroite.png" alt="" /></a>
				</div>
			</div>
			
			<section>
				<article>
					<h1>
						<img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie"  />
						Je suis un grand voyageur
					</h1>
					<p>Lorem ipsum dolor sit amet...</p>
					<p>Vivamussed libero nec mauris pulvinar facilisis ut non sem...</p>
					<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
				</article>
				<aside>
					<h1>A propos de l'auteur</h1>
					<img src="images/bulle.png" alt="" id="fleche_bulle" />
					<p id="photo_zozor"><img src="images/zozor_classe.png" alt="Photo de Zozor" /></p>
					<p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>
					<p>
						Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie (ou zBiographique, comme vous voulez !)
						afub que les zéros sachent qui je suis réellement.
					</p>
					<p>
						<img src="images/facebook.png" alt="Facebook">
						<img src="images/twitter.png" alt="Twitter">
						<img src="images/vimeo.png" alt="Vimeo">
						<img src="images/flickr.png" alt="Flickr">
						<img src="images/rss.png" alt="RSS">
					</p>
				</aside>
			</section>
			
			<footer>
				<div id="tweet">
					<h1>Mon dernier tweet</h1>
					<p>Hiii haaaaan!</p>
					<p>Le 12 mai à 23h12</p>
				</div>
				<div id="mes_photos">
					<h1>Mes photos</h1>
					<p>
						<img src="images/photo1.jpg" alt="Photographie" />
						<img src="images/photo2.jpg" alt="Photographie" />
						<img src="images/photo3.jpg" alt="Photographie" />
						<img src="images/photo4.jpg" alt="Photographie" />
					</p>
				</div>
				<div id="mes_amis">
					<h1>Mes amis</h1>
					<ul>
						<li><a href="#">Pupi le lapin</a></li>
						<li><a href="#">Mr Baobab</a></li>
						<li><a href="#">Kaiwaii</a></li>
						<li><a href="#">Perceval.eu</a></li>
					</ul>
					<ul>
						<li><a href="#">Bemette</a></li>
						<li><a href="#">Le concombre masqué</a></li>
						<li><a href="#">Ptit prince</a></li>
						<li><a href="#">Mr Fan</a></li>
					</ul>
				</div>
			</footer>
		</div>
	</body>
</html>